<template>
	<div>
		<div class="item" >
			<div class="image">
				<img :src="data.showImage" alt="" />
			</div>

			<div class="content">
				<p>{{data.commodityName}}</p>
				<p>{{data.commodityDescribe}}</p>
				<p>
					<span>￥{{data.discountPrice || data.commodityPrice}}/<span style="font-size: 10px;">{{data.unit || '斤'}}</span></span>
					<span v-if="data.discountPrice">￥{{data.commodityPrice}}/{{data.unit || '斤'}}</span>
				</p>

				<div class="commodityBtn">
					<!-- 加入购物车 -->
					<button @click="isShowPopup = true" v-if="isShowbtn == 'addCar'">
						<van-icon name="cart-o" size="14px" />
					</button>

					<van-stepper v-if="isShowbtn == 'stepper'" :value="data.commodityNum" @change="cardStepper" />
					
					<span v-if="isShowbtn == 'number'" style="font-size: 12px; color: #999;">x{{data.commodityNum}}</span>
				</div>



			</div>
		</div>
		
		<Popup :data="data" :isShow="isShowPopup" @close="isShowPopup = false"></Popup>
		
	</div>
</template>

<script>
	import {
		addShoppingCart
	} from '../../api/classfiy';
	
	import Popup from "../../components/popup/index.vue"

	// 防抖函数
	function debounce(func, delay) {
		let timer = null;
		return function(...args) {
			if (timer) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				func.apply(this, args);
			}, delay);
		};
	}

	export default {
		data() {
			return {
				isShowPopup: false,
				number: 1,
			}
		},
		
		components:{Popup},

		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				},
				required: true
			},

			isShowbtn: {
				type: String,
				default: () => {
					return 'addCar'
				}
			},
			
			
		},

		methods: {
			// 步进岂发生变化   结合防抖函数
			cardStepper: debounce(async function(e) {
				// 通知父组件商品发生变化
				this.$emit('commodityChange', {
					id: this.data.id, // 商品id 
					commodityNum: e.detail // 商品数量
				});

				let userInfo = uni.getStorageSync("userInfo") || {};

				let parmse = {
					commodityNum: e.detail, // 商品数量  
					userId: userInfo.id, // 用户 id
					phoneNumber: userInfo.phoneNumber, // 用户手机号
					commodityId: this.data.id, // 商品 id
					isCover: true
				};
				console.log(parmse);

				try {
					let result = await addShoppingCart(parmse);
				} catch (error) {
					console.error('请求出错:', error);
					uni.showToast({
						title: "服务器异常，请联系管理员",
						icon: 'none',
						duration: 2000
					})
				}
			}, 300)
		}
	}
</script>

<style scoped>
	.item {
		width: 100%;
		height: 100px;
		display: flex;
		margin-bottom: 10px;
		border-radius: 5px;
	}

	.item .image {
		width: 80px;
		height: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
	}

	.item .image img {
		height: 100%;
	}

	.item .content {
		margin-left: 5px;
		color: #333;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: calc(100% - 80px);
		padding: 5px;
		box-sizing: border-box;
	}

	.item .content p {
		overflow: hidden;
		width: 100%;
	}

	.item .content p:nth-child(1) {
		font-size: 14px;
		font-weight: 600;
	}

	.item .content p:nth-child(2) {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.item .content p:nth-child(3) {
		font-size: 14px;
		color: #FF4F64;
		font-weight: 600;
	}

	.item .content p:nth-child(3) span:nth-child(2) {
		font-size: 10px;
		text-decoration: line-through;
		color: #999;
		font-weight: 400;
	}

	.item .content .commodityBtn {
		width: 100%;
		text-align: right;
		/* background: red; */
	}

	.item .content button {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		margin-left: auto;
		background-color: #1BA035;
		color: #fff;
	}

	.stepper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		box-sizing: border-box;
	}

	.stepper p {
		font-size: 14px;
		color: #333;
	}

	.btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 0px;
		left: 0;
	}

	.btn button {
		width: 49%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #fff;
		font-weight: 700;
		background-color: #1BA035;
		border-radius: 20px;
	}

	.btn button:nth-child(1) {
		border: 1px solid #1BA035;
		color: #333;
		background-color: #fff;
		font-weight: 400;
	}
</style>